

<template>
  <div class="app-container">
    <div>
      <el-row :gutter="10">
        <el-col :span="6" :xs="24" :lg="24">
          <div class="bgwhite plr20 ptb20 radius10 flex-col">
            <div class="justify-between w100p">
              <div class="clr3c4 bold ft26">降級設置</div>
              <!-- <div class="clr9fa align-center pointer" @click="back()">
                <el-icon>
                  <Back />
                </el-icon>
                <span class="ml5">返回上一頁</span>
              </div> -->
            </div>
            <div class="mt40">

              <el-form :label-position="labelPosition" label-width="auto" :model="formLabelAlign" style="max-width: 600px">
                <el-form-item label="審核降級天數:">
                  <el-input v-model="formLabelAlign.day" style="width: 380px;" placeholder="請輸入天數" />
                </el-form-item>
                <el-form-item label="降級等級:">
                  <el-input v-model="formLabelAlign.interval" placeholder="請輸入等級" />
                </el-form-item>
                <el-form-item label="是否開放:">
                  <el-radio-group v-model="formLabelAlign.is_open" class="ml-4">
                    <el-radio value="1" size="large">是</el-radio>
                    <el-radio value="0" size="large">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-form>
              <div class="mt40 mb15 flex-cen ">
                <div class="align-center">
                  <el-button class="btn1" @click="reset()">重置</el-button>
                  <el-button class="btn2" @click="submit()">提交</el-button>
                </div>

              </div>
            </div>


          </div>

        </el-col>



      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { useRouter } from 'vue-router';
import type { FormProps } from 'element-plus'
import { getDownSetting, downSetting } from '@/api/brokers'
onMounted(() => {
  getSetting()
})
const getSetting = () => {
  getDownSetting().then((res) => {
    console.log('获取设置成功', res)
    formLabelAlign.day = res.data.day
    formLabelAlign.interval = res.data.interval
    formLabelAlign.is_open = `${res.data.is_open}`
  })
}
const submit = () => {
  downSetting({
    day: formLabelAlign.day,
    interval: formLabelAlign.interval,
    is_open: formLabelAlign.is_open
  }).then((res) => {
    console.log('保存降级设置', res)
    ElMessage.success(res.msg);
    getSetting()
  })
}
const reset = () => {
  formLabelAlign.day = ''
  formLabelAlign.interval = ''
}
// const radio1 = ref('1')
const labelPosition = ref<FormProps['labelPosition']>('right')

const formLabelAlign = reactive({
  day: '',
  interval: '',
  is_open: ''
})
const router = useRouter()
const back = () => {
  router.back()
}
</script>
<style scoped >
:deep(.el-upload--picture-card) {
  background-color: transparent;
  border: none;
}

:deep(.el-input__wrapper) {
  /* align-items: start; */
}

:deep(.el-input) {
  box-shadow: none;
}

:deep(.el-input) {
  --el-input-focus-border-color: #dcdfe6;
  --el-input-hover-border-color: #dcdfe6;
  --el-input-focus-border: transparent;
}
</style>